import { Image, Text, View } from "@tarojs/components";
import styles from "./index.scss";
import { useRequest } from "taro-hooks";
import { createFamilyCode } from "@/services/Family";
import { useFamilyStore } from "@/model";
import Taro, { showToast } from "@tarojs/taro";
import { delFamilyUser, getFamilyUserList } from "@/services/FamilyMember";
import Card from "@/components/Card";
import { Add, User } from "@nutui/icons-react-taro";
import SearchBar from "@/components/SearchBar";
import Tag from "@/components/Tag";
import Dialog from "@/components/Dialog";
import { useRef, useState } from "react";
import { Avatar, Swipe, Button, } from "@nutui/nutui-react-taro";
import { isMeById } from "@/utils/token";
import { getImgUrl } from "@/utils";

export default () => {
  const { family } = useFamilyStore();
  const searchParams = useRef({
    familyId: family.id,
    nickname: "",
  });
  const [copyOpen, setCopyOpen] = useState(false);
  const copy = () => {
    Taro.setClipboardData({
      data: code || "",
    });
  };
  const { run: createCode, data: code } = useRequest(createFamilyCode, {
    manual: true,
    onSuccess: () => {
      setCopyOpen(true);
    },
  });
  const { data: familyUserList, run: refresh } = useRequest(() => getFamilyUserList(searchParams.current), {
    defaultParams: [searchParams],
  });

  return (
    <View className={styles.container}>
      <SearchBar
        onSearch={(v) => {
          searchParams.current = {
            ...searchParams.current,
            nickname: v || "",
          }
          refresh();
        }}
        right={
          <View
            className={styles.invite}
            onClick={() => {
              createCode(family.id);
            }}
          >
            <Add size={14} />
            邀请家人
          </View>
        }
      />
      <View className={styles.list}>
        {familyUserList?.map?.((item) => (
          <Card key={item.id}>
            <Swipe
              rightAction={
                <>
                  {
                    !isMeById(item.userId) && <Button
                      type="primary"
                      shape="square"
                      onClick={async () => {
                        await delFamilyUser({ familyId: family.id, userId: item.userId });
                        refresh();
                        showToast({
                          title: "删除成功",
                          icon: "none",
                        });
                      }}
                    >
                      删除
                    </Button>
                  }
                </>

              }
            >
              <View className={styles.card}>
                <Avatar
                  size="small"
                  src={item.avatar && getImgUrl(item.avatar || '')}
                  icon={!item.avatar && <User />}
                  className={styles.icon}
                />
                <View className={styles.right}>
                  <View className={styles.rightTop}>
                    <View className={styles.name}>{item.nickname}</View>
                    {isMeById(item.userId) && <Tag type="info">我</Tag>}
                  </View>
                </View>
              </View>
            </Swipe>
          </Card>
        ))}
      </View>

      <Dialog
        visible={copyOpen}
        onClose={() => setCopyOpen(false)}
        onConfirm={() => {
          copy();
          setCopyOpen(false);
        }}
        okText="复制"
      >
        <View>家庭邀请码：</View>
        <Text>{code}</Text>
      </Dialog>
    </View>
  );
};
